<template>
  <div class="sales-stats-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>销售业绩统计</h2>
    </div>

    <!-- 筛选区域 -->
    <el-card class="filter-card">
      <el-row :gutter="20" class="filter-row">
        <el-col :span="4">
          <el-form-item label="销售负责人">
            <el-popover
              placement="bottom-start"
              width="300"
              trigger="click"
              :visible="salesTreeVisible"
              @hide="salesTreeVisible = false"
            >
              <template #reference>
                <el-input
                  v-model="selectedSalesName"
                  placeholder="请选择销售"
                  readonly
                  @click="salesTreeVisible = true"
                  style="width: 100%; cursor: pointer;"
                >
                  <template #suffix>
                    <div class="input-suffix">
                      <i 
                        v-if="selectedSalesName" 
                        class="el-icon-circle-close clear-icon" 
                        @click.stop="handleSalesClear"
                      ></i>
                      <i class="el-icon-arrow-down dropdown-icon"></i>
                    </div>
                  </template>
                </el-input>
              </template>
              
              <div class="sales-tree-container">
                <div class="tree-header">
                  <el-input
                    v-model="salesFilter"
                    placeholder="搜索销售"
                    prefix-icon="el-icon-search"
                    size="small"
                    style="flex: 1; margin-right: 8px;"
                  />
                  <el-button 
                    size="small" 
                    type="danger" 
                    plain
                    @click="handleSalesClearInPopover"
                    style="flex-shrink: 0;"
                  >
                    清空
                  </el-button>
                </div>
                <el-tree
                  ref="salesTreeRef"
                  :data="salesTreeData"
                  :props="salesTreeProps"
                  node-key="ddUserId"
                  :filter-node-method="filterSalesNode"
                  :expand-on-click-node="false"
                  :default-expanded-keys="salesDefaultExpandedKeys"
                  @node-click="handleSalesSelect"
                  style="max-height: 300px; overflow-y: auto; margin-top: 10px;"
                >
                  <template #default="{ node, data }">
                    <span class="tree-node">
                      <i v-if="!data.ddUserId" class="el-icon-folder tree-icon"></i>
                      <i v-else class="el-icon-user tree-icon"></i>
                      {{ node.label }}
                    </span>
                  </template>
                </el-tree>
              </div>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="客户名称">
            <el-input v-model="queryParams.customer" placeholder="请输入客户名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="项目状态">
            <el-select v-model="queryParams.projectStatus" placeholder="请选择状态" clearable style="width: 100%">
              <el-option label="全部" value="" />
              <el-option label="调研" value="0" />
              <el-option label="进行中" value="1" />
              <el-option label="已延期" value="2" />
              <el-option label="已关闭" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目创建日期">
            <el-date-picker
              v-model="queryParams.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              style="width: 100%"
              @change="handleDateRangeChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
            <el-button icon="Refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!-- 汇总卡片区 -->
    <el-row :gutter="15" class="summary-cards">
      <el-col :span="4">
        <el-card class="summary-card">
          <div class="card-content">
            <div class="card-icon sales">
              <i class="el-icon-user"></i>
            </div>
            <div class="card-info">
              <div class="card-title">销售人数</div>
              <div class="card-value">{{ summaryData.totalSales || 0 }}<span class="unit">人</span></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="summary-card">
          <div class="card-content">
            <div class="card-icon projects">
              <i class="el-icon-folder"></i>
            </div>
            <div class="card-info">
              <div class="card-title">总项目数</div>
              <div class="card-value">{{ summaryData.totalProjects || 0 }}<span class="unit">个</span></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="summary-card">
          <div class="card-content">
            <div class="card-icon processing">
              <i class="el-icon-loading"></i>
            </div>
            <div class="card-info">
              <div class="card-title">进行中项目</div>
              <div class="card-value">{{ summaryData.totalProcessingProjects || 0 }}<span class="unit">个</span></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="summary-card">
          <div class="card-content">
            <div class="card-icon customers">
              <i class="el-icon-office-building"></i>
            </div>
            <div class="card-info">
              <div class="card-title">服务客户数</div>
              <div class="card-value">{{ summaryData.totalCustomers || 0 }}<span class="unit">家</span></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="summary-card">
          <div class="card-content">
            <div class="card-icon contributors">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="card-info">
              <div class="card-title">参与人员</div>
              <div class="card-value">{{ summaryData.totalContributors || 0 }}<span class="unit">人</span></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="summary-card">
          <div class="card-content">
            <div class="card-icon hours">
              <i class="el-icon-time"></i>
            </div>
            <div class="card-info">
              <div class="card-title">累计工时</div>
              <div class="card-value">{{ summaryData.totalHours || 0 }}<span class="unit">h</span></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 销售业绩汇总列表 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>销售业绩汇总</span>
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="salesSummaryList"
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }"
        :empty-text="loading ? '加载中...' : '暂无数据'"
        stripe
        border
      >
        <el-table-column prop="saleName" label="销售姓名" width="120">
          <template #default="scope">
            <span class="sales-name">{{ scope.row.saleName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectCount" label="总项目" width="90" align="center">
          <template #default="scope">
            <el-tag type="info" effect="plain" size="small">{{ scope.row.projectCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="processingProjectCount" label="进行中" width="90" align="center">
          <template #default="scope">
            <el-tag type="success" effect="plain" size="small">{{ scope.row.processingProjectCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="closedProjectCount" label="已关闭" width="90" align="center">
          <template #default="scope">
            <el-tag type="info" effect="plain" size="small">{{ scope.row.closedProjectCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="delayedProjectCount" label="已延期" width="90" align="center">
          <template #default="scope">
            <el-tag type="warning" effect="plain" size="small">{{ scope.row.delayedProjectCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="newProjectCount" label="调研" width="90" align="center">
          <template #default="scope">
            <el-tag type="primary" effect="plain" size="small">{{ scope.row.newProjectCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="distinctCustomerCount" label="客户数" width="90" align="center">
          <template #default="scope">
            <div class="customer-count">
              <i class="el-icon-office-building" style="color: #409eff; margin-right: 4px;"></i>
              <span>{{ scope.row.distinctCustomerCount || 0 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="contributorCount" label="参与人员" width="100" align="center">
          <template #default="scope">
            <div class="contributor-count">
              <i class="el-icon-s-custom" style="color: #67c23a; margin-right: 4px;"></i>
              <span>{{ scope.row.contributorCount || 0 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="totalHours" label="累计工时" width="110" align="center">
          <template #default="scope">
            <div class="hours-info">
              <i class="el-icon-time" style="color: #e6a23c; margin-right: 4px;"></i>
              <span class="hours-value">{{ scope.row.totalHours || 0 }}h</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="项目状态分布" min-width="200" align="center">
          <template #default="scope">
            <div class="project-distribution">
              <div class="distribution-bar">
                <div 
                  class="bar-segment processing" 
                  :style="{ width: getPercentage(scope.row.processingProjectCount, scope.row.projectCount) + '%' }"
                  :title="`进行中: ${scope.row.processingProjectCount || 0}个`"
                ></div>
                <div 
                  class="bar-segment closed" 
                  :style="{ width: getPercentage(scope.row.closedProjectCount, scope.row.projectCount) + '%' }"
                  :title="`已关闭: ${scope.row.closedProjectCount || 0}个`"
                ></div>
                <div 
                  class="bar-segment delayed" 
                  :style="{ width: getPercentage(scope.row.delayedProjectCount, scope.row.projectCount) + '%' }"
                  :title="`已延期: ${scope.row.delayedProjectCount || 0}个`"
                ></div>
                <div 
                  class="bar-segment new" 
                  :style="{ width: getPercentage(scope.row.newProjectCount, scope.row.projectCount) + '%' }"
                  :title="`调研: ${scope.row.newProjectCount || 0}个`"
                ></div>
              </div>
              <div class="distribution-legend">
                <span class="legend-item processing">进行中</span>
                <span class="legend-item closed">已关闭</span>
                <span class="legend-item delayed">延期</span>
                <span class="legend-item new">调研</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 项目详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" :title="`项目详情 - ${selectedProject.projectName}`" width="80%" top="5vh">
      <el-tabs v-model="detailActiveTab" class="detail-tabs">
        <el-tab-pane label="基本信息" name="info">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="项目名称">{{ selectedProject.projectName }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ selectedProject.customer }}</el-descriptions-item>
            <el-descriptions-item label="销售负责人">{{ selectedProject.saleName }}</el-descriptions-item>
            <el-descriptions-item label="项目经理">{{ selectedProject.pmName }}</el-descriptions-item>
            <el-descriptions-item label="项目状态">
              <span :class="['status-tag', getStatusColor(selectedProject.projectStatus)]">
                {{ getProjectStatusText(selectedProject.projectStatus) }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ selectedProject.startTime }}</el-descriptions-item>
            <el-descriptions-item label="结束时间">{{ selectedProject.endTime }}</el-descriptions-item>
            <el-descriptions-item label="项目描述" :span="2">{{ selectedProject.description || '暂无描述' }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        
        <el-tab-pane label="工时统计" name="worklog">
          <el-table :data="projectDetailWorklog" style="width: 100%">
            <el-table-column prop="userName" label="成员姓名" width="120" />
            <el-table-column prop="totalHours" label="总工时" width="100" align="center">
              <template #default="scope">
                <span>{{ scope.row.totalHours || 0 }}h</span>
              </template>
            </el-table-column>
            <el-table-column prop="regularHours" label="常规工时" width="100" align="center">
              <template #default="scope">
                <span>{{ scope.row.regularHours || 0 }}h</span>
              </template>
            </el-table-column>
            <el-table-column prop="overtimeHours" label="其中加班工时" width="100" align="center">
              <template #default="scope">
                <span>{{ scope.row.overtimeHours || 0 }}h</span>
              </template>
            </el-table-column>
            <el-table-column prop="workDays" label="工作天数" width="100" align="center" />
            <el-table-column prop="avgDailyHours" label="日均工时" width="100" align="center">
              <template #default="scope">
                <span>{{ scope.row.avgDailyHours || 0 }}h</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getSalesList, getSalesSummaryStats, getProjectWorklogDetail } from '@/api/oa/worklog'

export default {
  name: 'SalesStatsView',
  data() {
    return {
      loading: false,
      salesOptions: [],
      // 销售树相关数据
      salesTreeData: [],
      salesTreeProps: {
        children: 'children',
        label: 'nickName'
      },
      salesTreeVisible: false,
      salesFilter: '',
      salesDefaultExpandedKeys: [],
      selectedSalesName: '',
      // 其他数据
      salesSummaryList: [],
      summaryData: {},
      detailDialogVisible: false,
      detailActiveTab: 'info',
      selectedProject: {},
      projectDetailWorklog: [],
      queryParams: {
        saleId: null,
        customer: '',
        projectStatus: '',
        dateRange: null,
        beginTime: '',
        endTime: ''
      }
    }
  },
  watch: {
    // 监听销售搜索
    salesFilter(val) {
      this.$refs.salesTreeRef && this.$refs.salesTreeRef.filter(val)
    }
  },

  created() {
    this.loadSalesOptions()
    this.loadSalesTree()
    this.loadData()
  },
  methods: {
    // 加载销售人员选项
    async loadSalesOptions() {
      try {
        const response = await getSalesList()
        if (response.code === 200) {
          this.salesOptions = response.data || []
        }
      } catch (error) {
        console.error('加载销售人员列表失败:', error)
        this.salesOptions = []
      }
    },

    // 加载销售树数据
    async loadSalesTree() {
      try {
        const { getUserDeptTree } = await import('@/api/organizational')
        const response = await getUserDeptTree()
        if (response.code === 200) {
          this.salesTreeData = this.adaptSalesTree(response.data || [])
          // 默认展开第一级
          this.salesDefaultExpandedKeys = this.salesTreeData.map(item => item.deptId).filter(Boolean)
        }
      } catch (error) {
        console.error('加载销售树失败:', error)
        this.salesTreeData = []
      }
    },

    // 适配销售树数据结构，只显示销售角色的用户
    adaptSalesTree(data) {
      const result = []
      
      data.forEach(dept => {
        const deptNode = {
          deptId: dept.deptId,
          nickName: dept.deptName,
          children: []
        }
        
        // 添加子部门
        if (dept.children && dept.children.length > 0) {
          const childDepts = this.adaptSalesTree(dept.children)
          deptNode.children.push(...childDepts)
        }
        
        // 只添加销售角色的用户，过滤掉admin和ry用户
        if (dept.userList && dept.userList.length > 0) {
          const salesUsers = dept.userList
            .filter(user => {
              // 过滤系统用户
              if (user.ddUserId === 'admin' || user.ddUserId === 'ry') return false
              // 这里可以根据实际情况过滤销售角色用户
              // 暂时显示所有用户，可以根据需要添加角色过滤
              return true
            })
            .map(user => ({
              ddUserId: user.ddUserId,
              nickName: user.nickName
            }))
          deptNode.children.push(...salesUsers)
        }
        
        // 只有当部门有子部门或销售用户时才添加
        if (deptNode.children.length > 0) {
          result.push(deptNode)
        }
      })
      
      return result
    },

    // 过滤销售树节点
    filterSalesNode(value, data) {
      if (!value) return true
      return data.nickName.indexOf(value) !== -1
    },

    // 处理销售选择
    handleSalesSelect(data) {
      // 只有用户节点才能选择（有ddUserId的节点）
      if (data.ddUserId) {
        this.queryParams.saleId = data.ddUserId
        this.selectedSalesName = data.nickName
        this.salesTreeVisible = false
        this.salesFilter = ''
      }
    },

    // 清空销售选择
    handleSalesClear() {
      this.queryParams.saleId = null
      this.selectedSalesName = ''
    },

    // 弹出框内清空销售选择
    handleSalesClearInPopover() {
      this.queryParams.saleId = null
      this.selectedSalesName = ''
      this.salesTreeVisible = false
      this.salesFilter = ''
      // 自动触发搜索
      this.handleSearch()
    },

    // 处理日期范围变化
    handleDateRangeChange(dateRange) {
      if (dateRange && dateRange.length === 2) {
        this.queryParams.beginTime = dateRange[0]
        this.queryParams.endTime = dateRange[1]
      } else {
        this.queryParams.beginTime = ''
        this.queryParams.endTime = ''
      }
    },

    // 加载数据
    async loadData() {
      this.loading = true
      try {
        const params = {
          saleId: this.queryParams.saleId,
          customer: this.queryParams.customer,
          projectStatus: this.queryParams.projectStatus,
          beginTime: this.queryParams.beginTime,
          endTime: this.queryParams.endTime
        }
        
        const response = await getSalesSummaryStats(params)
        if (response.code === 200) {
          this.salesSummaryList = response.rows || response.data || []
          // 计算汇总数据
          this.calculateSummaryData()
        }
      } catch (error) {
        console.error('加载销售统计数据失败:', error)
        this.salesSummaryList = []
        this.summaryData = {}
      } finally {
        this.loading = false
      }
    },

    // 计算汇总数据
    calculateSummaryData() {
      if (this.salesSummaryList.length === 0) {
        this.summaryData = {}
        return
      }

      this.summaryData = {
        totalSales: this.salesSummaryList.length,
        totalProjects: this.salesSummaryList.reduce((sum, item) => sum + (item.projectCount || 0), 0),
        totalProcessingProjects: this.salesSummaryList.reduce((sum, item) => sum + (item.processingProjectCount || 0), 0),
        totalCustomers: this.salesSummaryList.reduce((sum, item) => sum + (item.distinctCustomerCount || 0), 0),
        totalContributors: this.salesSummaryList.reduce((sum, item) => sum + (item.contributorCount || 0), 0),
        totalHours: this.salesSummaryList.reduce((sum, item) => sum + (item.totalHours || 0), 0)
      }
    },

    // 计算百分比
    getPercentage(value, total) {
      if (!total || total === 0) return 0
      return Math.round((value / total) * 100)
    },

    // 搜索
    handleSearch() {
      this.loadData()
    },

    // 重置
    handleReset() {
      this.queryParams = {
        saleId: null,
        customer: '',
        projectStatus: '',
        dateRange: null,
        beginTime: '',
        endTime: ''
      }
      this.selectedSalesName = ''
      this.loadData()
    },

    // 查看详情
    async handleViewDetail(row) {
      this.selectedProject = row
      this.detailDialogVisible = true
      this.detailActiveTab = 'info'
      
      // 加载项目工时详情
      try {
        const response = await getProjectWorklogDetail(row.projectId)
        if (response.code === 200) {
          this.projectDetailWorklog = response.data || []
        }
      } catch (error) {
        console.error('加载项目工时详情失败:', error)
        this.projectDetailWorklog = []
      }
    },

    // 获取状态颜色
    getStatusColor(status) {
      const statusMap = {
        '0': 'status-blue',    // 调研
        '1': 'status-green',   // 进行中
        '2': 'status-orange',  // 已延期
        '3': 'status-gray'     // 已关闭
      }
      return statusMap[status] || 'status-default'
    },

    // 获取项目状态文本
    getProjectStatusText(status) {
      const statusMap = {
        '0': '调研',
        '1': '进行中',
        '2': '已延期',
        '3': '已关闭'
      }
      return statusMap[status] || status
    }
  }
}
</script>

<style scoped>
.sales-stats-view {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #2d3a4b;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-row {
  align-items: end;
}

.filter-row .el-form-item {
  margin-bottom: 0;
}

.filter-row .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.summary-cards {
  margin-bottom: 20px;
}

.summary-card {
  height: 100px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.15);
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px 0;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: #fff;
}

.card-icon.sales {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-icon.projects {
  background: linear-gradient(135deg, #36cfc9 0%, #52c41a 100%);
}

.card-icon.active {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.card-icon.hours {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-icon.processing {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}

.card-icon.customers {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
}

.card-icon.contributors {
  background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  color: #2d3a4b;
  line-height: 1;
}

.card-value .unit {
  font-size: 14px;
  color: #909399;
  margin-left: 4px;
}

.table-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: 600;
  color: #2d3a4b;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.detail-tabs {
  margin-top: 20px;
}

.detail-tabs .el-tabs__header {
  margin-bottom: 20px;
}

/* 销售树样式 */
.sales-tree-container {
  padding: 5px 0;
}

.tree-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* 输入框后缀样式 */
.input-suffix {
  display: flex;
  align-items: center;
  gap: 4px;
}

.clear-icon {
  color: #c0c4cc;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.3s;
}

.clear-icon:hover {
  color: #909399;
}

.dropdown-icon {
  color: #c0c4cc;
  font-size: 14px;
  transition: transform 0.3s;
}

.dropdown-icon:hover {
  color: #909399;
}

.tree-node {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.tree-icon {
  margin-right: 5px;
  color: #909399;
}

.el-tree-node__content:hover .tree-icon {
  color: #409EFF;
}

/* 表格相关样式 */
.sales-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.customer-count,
.contributor-count {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.hours-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hours-value {
  font-weight: 600;
  color: #e6a23c;
}

/* 项目状态分布样式 */
.project-distribution {
  width: 100%;
}

.distribution-bar {
  display: flex;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.bar-segment {
  height: 100%;
  transition: all 0.3s ease;
}

.bar-segment.processing {
  background-color: #52c41a;
}

.bar-segment.closed {
  background-color: #8c8c8c;
}

.bar-segment.delayed {
  background-color: #faad14;
}

.bar-segment.new {
  background-color: #1890ff;
}

.distribution-legend {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 10px;
  color: #666;
  position: relative;
}

.legend-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 2px;
}

.legend-item.processing::before {
  background-color: #52c41a;
}

.legend-item.closed::before {
  background-color: #8c8c8c;
}

.legend-item.delayed::before {
  background-color: #faad14;
}

.legend-item.new::before {
  background-color: #1890ff;
}

/* 状态标签样式继承父组件 */

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
  }
  
  .filter-row .el-col {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .summary-cards .el-col {
    margin-bottom: 15px;
  }
  
  .card-value {
    font-size: 24px;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-dialog {
    width: 95% !important;
  }
}
</style>
